<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术社区商城</title>
    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .el-carousel__container img {
            width: 100%;
            height: 100%;
        }

        .product-list {
            display: flex;
            flex-wrap: wrap;
        }

        .product-item {
            width: 23%;
            /* 调整为4列显示 */
            margin: 1%;
            text-align: center;
            border: 1px solid #e0e0e0e0;
            padding: 10px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .product-image {
            width: 100%;
            height: 150px;
            /* 调整图片高度 */
            object-fit: cover;
        }

        .cart {
            width: 23%;
            margin-left: 1%;
            border: 1px solid #e0e0e0e0;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .cart-empty {
            text-align: center;
            padding: 50px 0;
            color: #909090;
        }

        .cart-empty img {
            width: 100px;
            height: auto;
        }

        .cart-total {
            text-align: right;
            margin-top: 20px;
            font-size: 18px;
        }

        .cart-button {
            text-align: right;
            margin-top: 10px;
        }

        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .cart-item img {
            width: 50px;
            /* 设置购物车中商品图片的宽度 */
            height: 50px;
            /* 设置购物车中商品图片的高度 */
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4" style="display: flex; flex-direction: row; align-items: center;">
                        <img src="./static/image/logo.png" style="height: 60px;" />
                        <h2 style="padding-left: 6px;">技术社区</h2>
                    </el-col>
                    <el-col :span="8">
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                            @select="handleSelect" style="border-bottom: none !important;">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4">商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8" style="height: 60px; line-height: 60px;" class="hidden-xs-only">
                        <el-input placeholder="请输入内容" />
                    </el-col>
                    <el-col :span="4" v-if="isLoggendIn" style="text-align: right; height: 60px; line-height: 60px"
                        class="hidden-only-sm;">
                        <el-link type="primary"><a href="login.html"
                                style="text-decoration: none; color: black;">登录</a></el-link>
                        <el-link type="primary" style="padding-left: 10px"><a href="register.html"
                                style="text-decoration: none; color: black;">注册</a></el-link>
                    </el-col>
                    <el-col :span="4" v-else style="text-align: right; height:60px; line-height: 60px"
                        class="hidden-only-sm;">
                        <el-link type="primary"><img src="./static/image/tou.png"
                                style="height: 60px; border-radius: 50%;"></el-link>
                        <el-link type="primary" style="padding-left: 10px"><a href="person.html"
                                style="text-decoration: none; color: black;">个人中心</a></el-link>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row v-if="activeIndex === 4">
                    <!-- 左侧商品列表 -->
                    <el-col :span="18">
                        <el-card style="margin-top: 20px;">
                            <div class="product-list">
                                <div class="product-item" v-for="product in products" :key="product.id">
                                    <img :src="'./static/image/' + product.image" class="product-image" alt="product" />
                                    <h3>{{ product.title }}</h3>
                                    <p>价格: ¥{{ product.price }}</p>
                                    <p>库存: {{ product.stock }}</p>
                                    <el-button type="primary" @click="addToCart(product)">加入购物车</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>

                    <!-- 右侧购物车 -->
                    <el-col :span="6">
                        <el-card style="margin-top: 20px; margin-left: 20px;">
                            <h3>购物车</h3>
                            <div v-if="cart.length > 0">
                                <ul>
                                    <li v-for="item in cart" :key="item.id" class="cart-item">
                                        <img :src="'./static/image/' + item.image" alt="cart-item" />
                                        <div class="cart-item-details">
                                            <span>{{ item.title }} - ¥{{ item.price }} x {{ item.quantity }}</span>
                                            <div>
                                                <el-button type="danger" size="mini"
                                                    @click="removeFromCart(item.id)">删除</el-button>
                                                <el-button type="primary" size="mini"
                                                    @click="increaseQuantity(item.id)">+</el-button>
                                                <el-button type="warning" size="mini"
                                                    @click="decreaseQuantity(item.id)">-</el-button>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div class="cart-total">
                                    总价: ¥{{ totalPrice }}
                                </div>
                                <div class="cart-button">
                                    <el-button type="primary" @click="checkout">结算</el-button>
                                </div>
                            </div>
                            <el-empty v-else description="购物车为空" />
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>

            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8" style="display: flex; flex-direction: row; align-items: center">
                        <div>
                            <img src="./static/image/logo.png" style="height: 100px" />
                        </div>
                        <div>
                            <h2 style="padding-left: 4px">技术社区</h2>
                            <p style="padding-left: 4px">致力构建一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="10" style="padding-top: 30px;">
                        <div>
                            <el-link type="primary" style="padding-left: 50px">首页</el-link>
                            <el-link type="primary" style="padding-left: 70px">咨询</el-link>
                            <el-link type="primary" style="padding-left: 80px">课程</el-link>
                            <el-link type="primary" style="padding-left: 80px">商城</el-link>
                        </div>
                        <div>
                            <el-link type="primary" style="padding-left: 30px">关于我们</el-link>
                            <el-link type="primary" style="padding-left: 50px">使用手册</el-link>
                            <el-link type="primary" style="padding-left: 50px">隐私条款</el-link>
                            <el-link type="primary" style="padding-left: 50px">建议反馈</el-link>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="6">
                        <div>
                            <h2>联系我们</h2>
                            <p>电话：19710575380</p>
                            <p>邮箱：hsr@develop.com</p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="24" style="background-color: deepskyblue;">
                        <p style="text-align: center;">软件开发工作室版权所有</p>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>

    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    activeIndex: 4,
                    isLoggendIn: false,
                    products: [
                        { id: 1, title: '代码新秀闪耀徽章', price: 10, stock: 200, image: 'product01.png' },
                        { id: 2, title: '极简主义帆布包', price: 50, stock: 100, image: 'product02.png' },
                        { id: 3, title: 'IT社区T恤', price: 60, stock: 100, image: 'product03.png' },
                        { id: 4, title: 'IT社区笔记本', price: 30, stock: 50, image: 'product04.png' },
                        { id: 5, title: 'IT社区鼠标垫', price: 15, stock: 50, image: 'product05.png' },
                        { id: 6, title: 'IT社区马克杯', price: 20, stock: 50, image: 'product06.png' },
                    ],
                    cart: [],
                };
            },
            methods: {
                handleSelect(key, keyPath) {
                    this.activeIndex = key;
                },
                addToCart(product) {
                    const existingItem = this.cart.find(item => item.id === product.id);
                    if (existingItem) {
                        existingItem.quantity++;
                    } else {
                        this.cart.push({ ...product, quantity: 1 });
                    }
                },
                removeFromCart(productId) {
                    this.cart = this.cart.filter(item => item.id !== productId);
                },
                increaseQuantity(productId) {
                    const item = this.cart.find(item => item.id === productId);
                    if (item) {
                        item.quantity++;
                    }
                },
                decreaseQuantity(productId) {
                    const item = this.cart.find(item => item.id === productId);
                    if (item && item.quantity > 1) {
                        item.quantity--;
                    }
                },
                checkout() {
                    console.log('结算:', this.cart);
                    // 结算逻辑
                },
            },
            computed: {
                totalPrice() {
                    return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
                },
            },
        }).use(ElementPlus).mount('#app');
    </script>
</body>

</html>